<template>
  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        管理系统
      </h1>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12" v-if="list&&list.length>0">
          <div class="box box-primary">
            <div class="box-header">
            </div>
            <div class="box-body" >
              <div class="row" v-for="item in list">
                <v-list :item="i" v-for="i in item"></v-list>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-12" v-if="subItems.length>0">
          <div class="box box-primary">
            <div class="box-body" v-for="(item,index) in subItems">
              <h4>{{item.objName}}</h4>
              <table  :id="`table${index}`"></table>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>
</template>
<script>
  import axios from 'src/components/util/axios';
  import { apiUrl } from 'src/components/config.js'
  import vText from 'src/components/form/FormText';
  import vSelect from 'src/components/form/FormSelect';
  import vList from 'src/components/table/List';
  import dateUtil from 'src/components/util/date-format';
  import  'src/plugins/datepicker/bootstrap-datepicker.js';
  import {mapGetters} from 'vuex';
  import {INIT_DETAIL} from 'src/store/mutation-types';
  export default {
    data(){
      return{
        detailList:[],
        subItems:[]
      }
    },
    created(){
      this.initCol();
    },
  watch: {
    '$route':function () {
      this.initCol();
    }
  },
    methods:{
      initCol(){
          let ocn = this.$route.query.ocn;
          let id = this.$route.query.id;
          axios.get('/v1/obj/'+ocn+'/get?id='+id).then((res) => {
            console.log("res.data.data",res.data.data);
             this.detailList = res.data.data.fields;
             this.subItems = res.data.data.subItems;
              this.$nextTick(function (){
                this.subItems.map((item,index)=>{
                  let tableId = `table${index}`;
                  console.log("tableId",tableId);
                  let subObjCls = item.objClsName;
                  console.log("subObjCls",subObjCls);
                  let col = item.listConfigs.map((col)=>{
                    col.title = col.name;
                    col.sortable = true;
                    if(col.isTime===1){
                      col.formatter = function (value, row, index){
                        return '<div>'+ dateUtil.format(value,'yyyy-MM-dd hh:mm:ss') + '</div>';
                      }
                    }
                    if(col.isImg===1){
                      col.formatter = function (value, row, index){
                        return '<img style="width: 30px;" src="'+value+'">';
                      }
                    }
                    if(col.isHidden===1){
                      col.visible = false;
                    }
                    return col
                  });
                  $(`#${tableId}`).bootstrapTable('destroy');
                  //获取表格数据：/{objCls}/{id}/{subObjCls}
                  $(`#${tableId}`).bootstrapTable({
                    url: `${apiUrl}/v1/obj/${ocn}/${id}/${subObjCls}`,
                    columns:col,
                    method:'get',
                    pagination: true,//分页
                    pageSize:20,//每页的记录行数
                    pageNumber: 1,//初始化加载第一页，默认第一页
                    striped: true,     //使表格带有条纹
                    pageList: [20, 50, 100, 200],
                    search: false,//显示搜索框
                    sortable: true, //是否启用排序
                    sidePagination: 'server',//server，服务端处理分页,client本地
                    queryParams: function (params) {
                      return{
                        "pageSize":params.limit,
                        "pageNum": parseInt((params.offset) / params.limit) + 1,
                        "sortOrder":params.order,
                        "sortName":params.sort
                      }
                    },
                    responseHandler: function (resp) {//处理获取的数据，rows，total必填
                      return {
                        "rows":resp.data,
                        "total": resp.total,
                        "pageSize": resp.pageSize,
                        "pageNumber": resp.pageNum
                      }
                    }
                  })
                })
              })
          });
      },
    },
    components: {
      vList
    },
    computed:{
      list(){
        let arr=[];
        let _arr=[];
        let length = this.detailList.length;
        this.detailList.map((v,key)=>{
          if(v.isHidden===0){
            if(v.format===5||v.format===4){
              arr.push(v);
            }else if(key%2==0&&key<length-1){
              _arr.push(v)
            }else{
              _arr.push(v);
              arr.push(_arr);
              _arr=[]
            }
          }
        })
        return arr
      }
    }
  }
</script>
<style>
  .control-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
  }
</style>

